<template>
  <div>
   <tables  :delDataApi="delArea"  :loadDataApi="getAreas" v-on:onAdd="onAdd" v-on:onEdit="onEdit"  :tableCofig="tableConfig" ref="tables"  :columns="columns" />
   <Drawer title="地区编辑" v-model="isShopPanel" width="300" :style="formPanelStyles" :mask-closable="false">
       <Input v-model="formData.areaName" placeholder="请输入区域名称" class="mt10"/>
       <Input type="textarea" :rows="4" v-model="formData.remark" placeholder="请输入备注" class="mt10"/>
        <RadioGroup v-model="formData.enable" class="mt10">
              <Radio label="0">禁用</Radio>
              <Radio label="1">启用</Radio>
        </RadioGroup>
        <div class="drawer-footer">
            <Button style="margin-right: 8px" @click="isShopPanel = false">取消</Button>
            <Button type="primary" :loading="saveStatus" @click="add">
                <span v-if="!saveStatus">保存</span>
                <span v-else>正在保存中...</span>
            </Button>
        </div>
    </Drawer>  
  </div>
  
</template>

<script>
import Tables from '_c/tables'
import { getAreas, delArea, editArea} from '@/api/system/areaApi'
export default {
  components: {
    Tables
  },
  data () {
    return {
      saveStatus:false,//保存状态  
      getAreas:getAreas,
      delArea:delArea,
      formData:{
          areaId:null,
          areaName:"",
          enable:0,
          remark:null
      },
      isShopPanel:false,
      formPanelStyles: {
          height: 'calc(100% - 55px)',
          overflow: 'auto',
          paddingBottom: '53px',
          position: 'static'
      },
      ruleValidate:{

      },
      tableConfig:{
          idKey:'typeId',
          border:true,
          stripe:true,
          editable:true,
          dataAPi:'',
          editApi:'',
          delApi:'',
          addApi:'',
          noDataText:'暂无区域信息',
          action:{
                title:"操作",
                showDel:true,
                showEdit:true,
                width:200
          }
       },
      columns: [
        {type: 'selection',width:60,align:'center'},
        {title: '城市代码',width:100,align:'center',key:'cityCode'},
        {title: '区域名称', key: 'areaName',width:150,align:'center' ,tooltip:true},
        {title: '备注', key: 'remark', tooltip:true},
        {title: '是否启用',width:150, key: 'enable', align:'center',width:100,
          render: (h, params) => {
            
              return h('Tag', {
                    props: {
                        color: params.row.enable==1?'success':'warning'
                    },  
               },params.row.enable==1?'开启':'关闭');
        }},
        {title: '创建时间', key: 'createTime',format:'date',align:'center'},
        {title: '创建人', key: 'createBy',width:80},
      ]
    }
  },
  methods: {
      
    add(){
          this.saveStatus=true;
          editArea(this.formData)
          .then(res=>{
             this.saveStatus=false
             this.isShopPanel=false;
             this.$refs.tables.loadData();
          })
          .catch(err=>{
             this.saveStatus=false;
             this.$Message.error(err);
          })  
    },
    onEdit(params){
        
    },
    onAdd(){
        this.isShopPanel=true;
    }
    
  },  
  mounted () {
   
  }
}
</script>

<style>

</style>
